<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
   </style>
</head>
<body> 
	 <div class="container" >
	 
		<div class="panel panel-default" id="app">
			  <div class="panel-body">
			  	    <h1>vue2.0 computed的应用场景 渲染需要计算的数据</h1>
                   	 <div >计算前的数据 {{message}}</div>
                   	<div v-on:click="myclick()" >计算后的属性,截取前5位 {{ computedMessage }}</div>
			  </div>
		</div>		

		
	   
		
	 </div>
</body>
</html>
<script>
 new Vue({
  el: '#app',
  data: {
	  message:  "is so Cool Hello Word!"
  },
  computed:{  //computed 一般用于直接渲染在Dom上面
	  computedMessage:   function(){
		  return  this.message.substr(0,5); /*取前5位*/
	  }
  },
  methods:{ //methods 一般通过事件触发 
	  myclick :function(){
		  alert(this.message.substr(0,5));
	  }
	  
  }
 
});

</script>


